<template>
  <!---------------------------------------------订单信息--------------------------------------------------->
  <el-form ref="orderHeaderForm" :model="form" :inline="true" :rules="formRules" label-width="120px" label-position="right">
    <el-divider content-position="left">
      订单信息
      <el-popover content="带 * 号为必填项" trigger="hover">
        <i slot="reference" class="el-icon-question" />
      </el-popover>
    </el-divider>
    <!--境内结算方式 及 币别-->
    <el-row>
      <el-form-item label="境内结算方式:" prop="settleId">
        <el-select v-model.trim="form.settleId" filterable clearable popper-class="common-select-popper" @change="changeSettlement">
          <el-option v-for="item in settlementList" :key="item.id" :label="item.businessType + '-' +(item.accountPeriod ? item.settlementMode + '-' + item.accountPeriod : item.settlementMode)" :value="item.id" class="common-select-option">
            <span class="left-select-option">{{ item.businessType + ' ' + item.settlementMode }}</span>
            <span v-if="item.accountPeriod" class="right-select-option">{{ item.accountPeriod }}</span>
          </el-option>
        </el-select>
        <div v-if="businessType" class="tip-message">{{ businessType === 2 ? '海关' : '华富洋' }}开13%增值税票</div>
      </el-form-item>
      <el-form-item label="币别:" class="longer-form-item" prop="currency">
        <el-radio-group v-model="form.currency">
          <el-radio v-for="item in currencyArray" :key="item.value" :label="item.label">{{ item.label }}</el-radio>
        </el-radio-group>
        <el-link type="primary" :icon="showAllSupportCurrency ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'" class="ml12" @click="showMoreCurrency" />
      </el-form-item>
    </el-row>

    <!--供应商名称 及 联系人-->
    <el-row>
      <el-form-item label="供应商名称:" prop="supplier.id" :rules="formRules.supplierId">
        <el-select v-model.trim="form.supplier" value-key="id" filterable clearable remote :remote-method="getSupplierList" :loading="supplierLoading" popper-class="common-select-popper" @change="changeSupplier">
          <el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName" :value="item" class="common-select-option">
            <div class="select-title">{{ item.supplierName }}</div>
            <span class="select-other">{{ item.supplierNameEn }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商联系人:" prop="supplierContactId">
        <el-select v-model.trim="form.supplierContactId" filterable clearable :disabled="!form.supplier" popper-class="common-select-popper">
          <el-option v-for="item in supplierContactList" :key="item.id" :label="npt(item.name, item.phone, item.tel)" :value="item.id" class="common-select-option">
            <div class="select-title">{{ item.name }}</div>
            <span class="select-other">
              {{ item.phone }}
              <el-divider direction="vertical" />
              {{ item.tel }}
            </span>
          </el-option>
        </el-select>
      </el-form-item>
    </el-row>

    <!--双抬头 指定报关合同号-->
    <el-row v-if="businessType && businessType === 2">
      <el-form-item label="指定报关合同号:" prop="appointContractNo">
        <el-radio-group v-model="form.appointContractNo">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
        <div class="tip-message">报关合同号为报关专用，如需填写请联系商务专员。</div>
      </el-form-item>
      <el-form-item v-if="form.appointContractNo" label="指定报关合同号:" prop="contractNo">
        <el-input v-model.trim="form.contractNo" clearable />
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
import { settlementList, supplierList, supplierContactList } from '@/api/hfy/escm'
import { getDictSelectData, npt } from '@/utils/common'
export default {
  name: 'BookingOrderHeader',
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      npt: npt,
      // 境内结算方式,即方案下拉
      settlementList: [], businessType: '',
      // 供应商下拉
      supplierList: [], supplierLoading: false,
      // 供应商联系人
      supplierContactList: [],
      // 支持的币别 和 展示的币别
      currencyList: [], currencyArray: [], showAllSupportCurrency: true,
      formRules: {
        settleId: [
          { required: true, message: '境内结算方式必填', trigger: 'change' }
        ],
        supplierId: [
          { required: true, message: '供应商必选', trigger: 'change' }
        ],
        currency: [
          { required: true, message: '币别必选', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // 结算方式
    this.getSettlementList()
    // 币制
    this.getCurrenyList()
    // 供应商
    this.getSupplierList()
  },
  methods: {
    // 获取结算方式
    getSettlementList() {
      settlementList().then(res => {
        this.settlementList = res
      })
    },
    // 变更抬头 单抬头1 双抬头2
    changeSettlement(id) {
      const selectedSettlement = this.settlementList.find(item => item.id === id)
      if (selectedSettlement) {
        this.businessType = selectedSettlement.businessType.indexOf('单抬头') !== -1 ? 1 : 2
      } else {
        this.businessType = ''
      }
      this.$emit('update:businessType', this.businessType)
    },
    // 获取币制
    getCurrenyList() {
      getDictSelectData('escm_curreny').then(res => {
        this.currencyList = res
        // 初始只显示前2个币制
        this.showMoreCurrency()
      })
    },
    // 展示更多币制
    showMoreCurrency() {
      this.showAllSupportCurrency = !this.showAllSupportCurrency
      // 是否展示所有币制, 默认只展示前2个
      if (this.showAllSupportCurrency) {
        this.currencyArray = this.currencyList
      } else {
        this.currencyArray = this.currencyList.slice(0, 2)
      }
    },
    // 获取供应商
    getSupplierList(query) {
      this.supplierLoading = true
      const _this = this
      setTimeout(() => {
        supplierList({ keyword: query, page: 1, size: 10 }).then(res => {
          _this.supplierList = res
          _this.supplierLoading = false
        }).catch(() => { _this.supplierLoading = false })
      }, 200)
    },
    // 变更供应商
    changeSupplier(supplier) {
      // 刷新供应商联系人
      this.form.supplierContactId = ''
      if (supplier) {
        // 变更父表单的supplierId
        this.$emit('update:supplierId', supplier.id)
        this.getSupplierContactList()
      }
    },
    // 获取供应商联系人
    getSupplierContactList() {
      const supplier = this.form.supplier
      if (supplier) {
        supplierContactList({ supplierId: supplier.id }).then(res => {
          this.supplierContactList = res
        })
      }
    },
    self() {
      return this.$refs.orderHeaderForm
    }
  }
}
</script>
